<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		   <link rel="stylesheet" type="text/css" href="./css/common.css"/>

		   <link rel="stylesheet" type="text/css" href="./css/category.css"/>
		   <script src="./js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		   <script src="./js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
		   <title>小米商城</title>
		   <script type="text/javascript">
		   	// 1rem = 100px
		   	// 1px = 0.01rem
		   	(function (doc, win, undefined) {
		   	            var docEl = doc.documentElement,
		   	              resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
		   	              recalc = function () {
		   	                var clientWidth = docEl.clientWidth;
		   	                if (clientWidth === undefined) return;
		   	                //以ip5为基准  
		   	                docEl.style.fontSize =(clientWidth*100) / 375 + 'px';
		   	             };
		   	           if (doc.addEventListener === undefined) return;
		   	         win.addEventListener(resizeEvt, recalc, false);
		   	           doc.addEventListener('DOMContentLoaded', recalc, false)
		   	         })(document, window);
		   </script>
	</head>
	<body>
		
		<div id="container">
			<div class="left">
				<ul>
					<li class="current">小米手机</li>
					<li>Redmi手机</li>
					<li>黑鲨手机</li>
					<li>电视</li>
					<li>大家电</li>
					<li>电脑办公</li>
					<li>小爱音箱</li>
					<li>路由器</li>
					<li>生活电器</li>
					<li>厨房电器</li>
					<li>智能穿戴</li>
					<li>智能家居</li>
				</ul>
			</div>
			<div class="right">
				<div class="top">
					<img src="images/mi%20(6).jpg" >
				</div>
				<div class="middle">
					<h3>小米数字系列</h3>
					<ul>
						<li>
							<img src="./images/mi%20(14).jpg" />
							<p>小米10至尊版</p>
						</li>
						<li>
							<img src="./images/mi%20(23).jpg" />
							<p>小米10至青春</p>
						</li>
						<li>
							<img src="./images/mi%20(46).jpg" />
							<p>小米10</p>
						</li>
					</ul>
					<button type="button">进入手机频道<span></span></button>
				</div>
				<div class="middle">
					<h3>小米MIX系列</h3>
					<ul>
						<li>
							<img src="./images/mi%20(14).jpg" />
							<p>小米10至尊版</p>
						</li>
						<li>
							<img src="./images/mi%20(23).jpg" />
							<p>小米10至青春</p>
						</li>
						<li>
							<img src="./images/mi%20(46).jpg" />
							<p>小米10</p>
						</li>
					</ul>
					<button type="button">进入手机频道<span></span></button>
				</div>
				<div class="middle">
					<h3>小米数字系列</h3>
					<ul>
						<li>
							<img src="./images/mi%20(14).jpg" />
							<p>小米10至尊版</p>
						</li>
						<li>
							<img src="./images/mi%20(23).jpg" />
							<p>小米10至青春</p>
						</li>
						<li>
							<img src="./images/mi%20(46).jpg" />
							<p>小米10</p>
						</li>
					</ul>
					<button type="button">进入手机频道<span></span></button>
				</div>
			</div>
		</div>
		
		<div id="footer">
			<ul>
				<li>
					<div>
						<img src="./images/mi%20(72).jpg" />
					</div>
					<p>首页</p>
				</li>
				<li>
					<div>
						<img src="./images/mi%20(69).jpg" />
					</div>
					<p>分类</p>
				</li>
				<li>
					<div>
						<img src="./images/mi%20(75).jpg" />
					</div>
					<p>星球</p>
				</li>
				<li>
					<div>
						<img src="./images/mi%20(66).jpg" />
					</div>
					<p>购物车</p>
				</li>
				<li>
					<div>
						<img src="./images/mi%20(78).jpg" />
					</div>
					<p>我的</p>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		for(let i=0;i<$("#footer ul li").length;i++){
			$("#footer ul li").eq(i).click(function(){
				switch (i){
					case 0:
						window.location.href = "index.html"
						break;
					case 1:
						window.location.href = "category.html"
						break;
					case 2:
						window.location.href = "planet.html"
						break;
					case 3:
						window.location.href = "shopcar.html"
						break;
					case 4:
						window.location.href = "mine.html"
						break;
					default:
						break;
				}
			})
		}
		
	</script>
</html>
